<template>
  <div>
    <el-page-header @back="goBack" content="编辑学校"></el-page-header>
    <div class="fromBox">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="学校名称" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="所属区域" prop="province">
          <el-col :span="5">
            <el-select type="date" v-model="form.province" placeholder="请选择省" size="small" @change="cityFn">
              <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-select v-model="form.city" placeholder="请选择市" size="small" @change="areaFn">
              <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" :offset="1">
            <el-select v-model="form.area" placeholder="请选择区" size="small">
              <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="学校地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="学校账号">
          <el-input v-if="form.account!== ''" v-model="form.account" disabled="disabled"></el-input>
          <el-input v-else v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="联系老师" prop="full_name">
          <el-input v-model="form.full_name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="添加方式" prop="add_mode">
          <el-radio-group v-model="form.add_mode">
            <el-radio v-for="item in this.radioList" :key='item.val' :label='item.val'>{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-button type="primary" size="mini" @click="dialogFormVisible = true">修改</el-button>
          <!-- <el-select v-model="form.service_type" placeholder="请选择">
            <el-option v-for="item in this.service_type" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="有效期">
          <!-- <el-select v-model="form.effective_days" placeholder="请选择">
            <el-option v-for="item in this.effective_days" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="包含学段">
          <el-checkbox-group v-model="form.section_id">
            <el-checkbox v-for="item in this.learning_section" :key="item.id" :label="item.id">{{item.title}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="学校类型">
          <el-radio-group v-model="form.type">
            <el-radio v-for="item in this.school_type" :key="item.id" :label="item.id">{{item.title}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学校归属">
          <el-radio-group v-model="form.ascription">
            <el-radio v-for="item in this.school_ascription" :key="item.id" :label="item.id">{{item.title}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学生总数">
           <el-input-number v-model="form.student_total" :min="0"></el-input-number>  人
        </el-form-item>
        <el-form-item label="教师总数">
           <el-input-number v-model="form.teacher_total" :min="0"></el-input-number>  人
        </el-form-item>
        <el-form-item label="教师职称：">
          <table class="table" border="1px">
            <tr>
              <td></td>
              <td>三级职称</td>
              <td>二级职称</td>
              <td>一级职称</td>
              <td>高级职称</td>
              <td>特级职称</td>
            </tr>
            <tr>
              <td class="tableTitle">人数</td>
              <td><el-input-number v-model="form.teacher_title.three_level_title" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_title.second_level_title" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_title.one_level_title" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_title.senior_level_title" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_title.super_level_title" size="mini" :min="0"></el-input-number></td>
            </tr>
          </table>
        </el-form-item>
        <el-form-item label="教师学历：">
          <table class="table" border="1px">
            <tr>
              <td></td>
              <td>高中及以下</td>
              <td>大专</td>
              <td>本科</td>
              <td>硕士</td>
              <td>博士</td>
            </tr>
            <tr>
              <td class="tableTitle">人数</td>
              <td><el-input-number v-model="form.teacher_education.high_school_number" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_education.junior_college_number" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_education.undergraduate_number" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_education.masters_number" size="mini" :min="0"></el-input-number></td>
              <td><el-input-number v-model="form.teacher_education.doctor_number" size="mini" :min="0"></el-input-number></td>
            </tr>
          </table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 学生注册 -->
    <batch-add  v-if="isBatchAdd" :isBatchAdd="this.isBatchAdd" :row="form" @noBatchAdd="noBatchAdd"></batch-add>
    <el-dialog title="服务类型" :visible.sync="dialogFormVisible" :close-on-click-modal='false'>
      <el-form :model="form2">
        <el-form-item label="服务类型">
          <el-select v-model="form2.service_type" placeholder="请选择">
            <el-option v-for="item in this.service_type" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期">
          <el-select v-model="form2.effective_days" placeholder="请选择">
            <el-option v-for="item in this.effective_days" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="serviceFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {APISCHOOLWHOLEREGION, APIEDITSCHOOL, APIGETEDITSCHOOL, APIADDSCHOOLGETARCHIVESSUNDRY} from '@/common/api.js'
import batchAdd from './batchAdd.vue'
export default {
  components: {batchAdd},
  data () {
    return {
      isBatchAdd: false,
      radioList: [
        {name: '学校导入', val: 1},
        {name: '学生注册', val: 2}
      ],
      dialogFormVisible: false,
      form2: {
        service_type: '',
        effective_days: ''
      },
      form: {
        title: '',
        province: '',
        city: '',
        area: '',
        account: '',
        add_mode: '',
        full_name: '',
        address: '',
        tel: '',
        email: '',
        service_type: '',
        effective_days: '',
        section_id: [],
        type: '',
        ascription: '',
        student_total: '',
        teacher_total: '',
        teacher_title: {
          one_level_title: '',
          second_level_title: '',
          three_level_title: '',
          senior_level_title: '',
          super_level_title: ''
        },
        teacher_education: {
          high_school_number: '',
          junior_college_number: '',
          undergraduate_number: '',
          masters_number: '',
          doctor_number: ''
        },
        section_status: null
      },
      rules: {
        title: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
        province: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        full_name: [{ required: true, message: '请选择添加方式', trigger: 'change' }],
        add_mode: [{ required: true, message: '请输入学校名称', trigger: 'blur' }]
      },
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      service_type: [],
      effective_days: [],
      learning_section: [],
      school_type: [],
      school_ascription: []
    }
  },
  created () {
    this.provinceFn()
    this.getWholeRegion()
    this.getEdit()
  },
  methods: {
    getWholeRegion () {
      APIADDSCHOOLGETARCHIVESSUNDRY().then((res) => {
        this.service_type = res.data.service_type
        this.effective_days = res.data.effective_days
        this.learning_section = res.data.learning_section
        this.school_type = res.data.school_type
        this.school_ascription = res.data.school_ascription
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    provinceFn () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      APISCHOOLWHOLEREGION({
        parent_id: this.form.province
      }).then((res) => {
        this.cityOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    areaFn () {
      APISCHOOLWHOLEREGION({
        parent_id: this.form.city
      }).then((res) => {
        this.areaOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    getEdit () {
      APIGETEDITSCHOOL({
        school_id: this.$route.query.id
      }).then((res) => {
        this.form.title = res.data.title
        this.form.province = res.data.province
        this.form.city = res.data.city
        this.form.area = res.data.area
        this.form.account = res.data.account
        this.form.add_mode = res.data.add_mode
        this.form.full_name = res.data.full_name
        this.form.address = res.data.address
        this.form.tel = res.data.tel
        this.form.email = res.data.email
        this.form2.service_type = res.data.service_type === 0 ? '' : res.data.service_type
        this.form2.effective_days = res.data.effective_days === 0 ? '' : res.data.effective_days
        this.form.student_total = res.data.student_total
        this.form.teacher_total = res.data.teacher_total
        if (!res.data.school_archives) {
          this.form.type = res.data.school_archives.type
          this.form.section_id = res.data.school_archives.section_id
          this.form.ascription = res.data.school_archives.ascription
          this.form.teacher_title = res.data.school_archives.teacher_title
          this.form.teacher_education = res.data.school_archives.teacher_education
          this.form.student_total = res.data.school_archives.student_total
          this.form.teacher_total = res.data.school_archives.teacher_total
        }
        this.form.section_status = res.data.section_status
        this.form.id = res.data.id
        if (this.form.province !== '') {
          this.cityFn()
        }
        if (this.form.city !== '') {
          this.areaFn()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goBack () {
      this.$router.push({path: '/school'})
    },
    BatchAdd () { // 批量添加
      if (this.form.add_mode === 2) {
        this.isBatchAdd = true
      } else {
        this.$router.push({path: '/school'})
      }
    },
    noBatchAdd (type) {
      this.isBatchAdd = false
      if (type === 1) {
        this.$router.push({path: '/school'})
      }
    },
    serviceFn () {
      this.form.service_type = this.form2.service_type
      this.form.effective_days = this.form2.effective_days
      this.dialogFormVisible = false
    },
    onSubmit () {
      var data = {}
      data = this.form
      APIEDITSCHOOL({
        school_id: this.$route.query.id,
        title: data.title,
        province: data.province,
        city: data.city,
        area: data.area,
        account: data.account,
        add_mode: data.add_mode,
        full_name: data.full_name,
        address: data.address,
        tel: data.tel,
        email: data.email,
        service_type: data.service_type,
        effective_days: data.effective_days,
        section_id: data.section_id.toString(),
        type: data.type,
        ascription: data.ascription,
        student_total: data.student_total === undefined ? '' : data.student_total,
        teacher_total: data.teacher_total === undefined ? '' : data.teacher_total,
        teacher_title: JSON.stringify(data.teacher_title),
        teacher_education: JSON.stringify(data.teacher_education)
      }).then((res) => {
        this.$message.success(res.msg)
        if (data.section_status !== 1) {
          this.BatchAdd()
        } else {
          this.$router.push({path: '/school'})
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  },
  watch: {
    'form': function (newVal) {
      if (newVal.province !== null) {
        this.cityFn()
      }
      if (newVal.city !== null) {
        this.areaFn()
      }
    }
  }
}
</script>
<style>
.table{
  width: 100%;
  text-align: center;
  border: 1px solid #EBEEF5;
  border-collapse: collapse;
}
.table>tr>td{
  padding: 0 10px;
}
.tableTitle{
  width: 50px;
}
</style>
